<!--
***验证手机号***
-->
<template>
  <div>
    <v-header v-if="!$root.ISAPP">
        <div class="nav-tab2">
            <h3>验证手机号</h3>
        </div>
    </v-header>
    <step :step='2'></step>
    <div class="register">
      <div class="checkphone" v-if="isLogin">
        <h3>请确认您的手机信息</h3>
        <h4>手机号码</h4>
        <div class="phone">
          {{localUserInfos.mobile}}
        </div>
        <div class="btnBox">
          <a href="javascript:;" @click="product">确认</a>
        </div>
      </div>
      <div class="checkphone" v-if="!isLogin && isRegister">
        <h3>请确认您的手机信息</h3>
        <h4>手机号码</h4>
        <div class="phone arr">
          <span @click="country">{{countryCode}}</span>
          <input type="number" placeholder="请输入手机号" v-model="userEnter.mobile" @input="checkphone">
        </div>
        <div class="codebox">
          <div class="code">
            <input type="number" placeholder="请输入验证码" v-model="userEnter.validcode" @input="checkcode">
          </div>
          <a class="btn" :class="{disabled: userEnter.code}" @click="getValiCode(3)">{{regValiWords}}</a>
        </div>
        <div class="btnBox">
          <a href="javascript:;" :class="{disabled: userEnter.reg}" @click="registerNum">注册</a>
          <a href="javascript:;" class="line" @click="login">已有账号登录</a>
        </div>
      </div>
      <div class="checkphone" v-if="!isLogin && !isRegister">
        <h3>请确认您的手机信息</h3>
        <h4>手机号码</h4>
        <div class="phone arr">
          <span @click="country">{{countryCode}}</span>
          <input type="number" placeholder="请输入手机号" v-model="userEnter.mobile" @input="checkphone">
        </div>
        <div class="codebox">
          <div class="code">
            <input type="number" placeholder="请输入验证码" v-model="userEnter.validcode" @input="checkcode">
          </div>
          <a class="btn" :class="{disabled: userEnter.code}" @click="getValiCode(2)">{{valiWords}}</a>
        </div>
        <div class="btnBox">
          <a href="javascript:;" :class="{disabled: userEnter.reg}" @click="loginIn">下一步</a>
        </div>
      </div>
    </div>

    <mt-popup v-if="showTip" v-model="showTip">
      <div class="popup" >
        <div class="close"></div>
        <div class="notW">
          <div class="title"></div>
          <div class="text">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;您的手机号已注册过，</p>
            <p>现为您跳转登录页面</p>
          </div>
          <div class="btn" @click="close">确定</div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import step from './Step'
import { mapGetters } from 'vuex'
import { Checking } from '../../common/util'
import { isDistribution } from '../../common/api/distribution'
import * as api from '../../common/api/user'
export default {
  data() {
    return {
      isLogin: false,
      isRegister: true,
      userEnter: {
        code: true,
        reg: true
      },
      timeRun: {},
      valiWords: '获取验证码',
      regValiWords: '获取验证码',
      parentId: '',
      distributionId: '',
      showTip:false
    }
  },
  components: { step },
  mounted() {
    let arr = Object.getOwnPropertyNames(this.localUserInfos)
    if (arr.length > 1) {
      this.isLogin = true
    }

    this.distributionId = this.getCurrentUser().distributionId

    isDistribution()
      .then(res => {
        if (res.type === 1) {
          window.localStorage.setItem('distributionId', res.distributionid)
          this.distributionId = res.distributionid

          this.gotoPage({
            appUrl: {
              name: 'gotoAppWebview',
              params: {
                distributionId: this.distributionId,
                url: `${window.document.location.protocol}//${window.document.location.host}/distribution`
              }
            },
            webUrl: {
              name: '/distribution/',
              params: {}
            }
          })

        } else {
          window.localStorage.removeItem('distributionId')
        }
      })
      .catch(e => {
        console.log(e)
      })




    if (this.$root.ISAPP) {
      window.document.title = '验证手机号'
    }
    if (this.$route.params.parentid) {
      this.parentId = this.$route.params.parentid
    }
  },
  computed: {
    ...mapGetters({ localUserInfos: 'userInfo', countryCode: 'selectCountryCode' })
  },
  methods: {
    checkphone() {
      let val = Checking(this.userEnter.mobile, 'phone')
      if (val) {
        this.userEnter.code = false
      } else {
        this.userEnter.code = true
      }
    },
    checkcode() {
      if (this.userEnter.validcode) {
        this.userEnter.reg = false
      } else {
        this.userEnter.reg = true
      }
    },
    getValiCode(type) {
      if (this.userEnter.code) return
      let opt = {
        checktype: type,
        mobile: this.countryCode + '-' + this.userEnter.mobile
      }
      api.SendCaptcha(opt)
        .then(res => {
          if (!res) {
            var timeSecs = 60
            var tipsWord = ''
            this.toast('发送成功')
            this.timeRun = setInterval(() => {
              if (timeSecs > 1) {
                timeSecs--
                tipsWord = '已发送' + this.decpadleft(timeSecs) + 's'
                this.userEnter.code = true
                if (type === 2) {
                  this.valiWords = tipsWord
                } else if (type === 3) {
                  this.regValiWords = tipsWord
                }
              } else {
                if (type === 2) {
                  this.valiWords = '再次发送'
                } else if (type === 3) {
                  this.regValiWords = '再次发送'
                }
                this.userEnter.code = false
                clearInterval(this.timeRun)
                this.timeRun = null
              }
            }, 1000)
          }
        })
        .catch(e => {
          if (e && e.code === 1511531) {
            this.toast('验证码发送频繁, 请60s后再试')
          } else if (e && e.code === 1511543) {
            this.toast('未注册号码')
          } else if (e && e.code === 1511544) {
            this.toast('账号已被注册')
            this.showTip = true
            setTimeout(() => {
              this.showTip = false
              this.isRegister = false
            }, 2000);
          }
        })
    },
    registerNum() {
      let val = Checking(this.userEnter.mobile, 'phone')
      if (!val) {
        this.toast('请输入正确手机号')
        return
      }
      if (!this.userEnter.validcode) {
        this.toast('请输入验证码')
        return
      }
      let opt = {
        mobile: this.countryCode + '-' + this.userEnter.mobile,
        validcode: this.userEnter.validcode
      }
      api.AdjustRegister(opt)
        .then(res => {
          if (res) {
            this.$store.dispatch('setUserInfo', res)
            window.localStorage.setItem('isNewUser',true)
            if (this.parentId) {
              this.$router.replace(`/distribution/product/${this.parentId}`)
            } else {
              this.$router.replace('/distribution/product')
            }
          }
        })
        .catch(e => {
          if (e && e.code === 1511533) {
            this.toast('请输入正确的验证码')
          } else if (e && e.code === 1511532) {
            this.toast('请发送验证码')
          } else if (e && e.code === 1511544) {
            this.toast('账号已被注册')
          }
        })
    },
    loginIn() {
      let val = Checking(this.userEnter.mobile, 'phone')
      if (!val) {
        this.toast('请输入正确手机号')
        return
      }
      if (!this.userEnter.validcode) {
        this.toast('请输入验证码')
        return
      }
      let paramCode = {
        mobile: this.countryCode + '-' + this.userEnter.mobile,
        validcode: this.userEnter.validcode
      }
      api.LoginByCode(paramCode)
        .then(res => {
          if (res) {
            this.toast('登录成功')
            this.$store.dispatch('setUserInfo', res)
            isDistribution()
              .then(res => {
                if (res.type === 1) {
                  window.localStorage.setItem(
                    "distributionId",
                    res.distributionid
                  );
                  this.distributionId = res.distributionid;

                  this.gotoPage({
                    appUrl: {
                      name: "gotoAppWebview",
                      params: {
                        distributionId: this.distributionId,
                        url: `${window.document.location.protocol}//${
                          window.document.location.host
                        }/distribution`
                      }
                    },
                    webUrl: {
                      name: "/distribution/",
                      params: {}
                    }
                  });
                } else {
                  window.localStorage.removeItem("distributionId");
                  if (this.parentId) {
                    this.$router.replace(`/distribution/product/${this.parentId}`)
                  } else {
                    this.$router.replace('/distribution/product')
                  }
                }
              })
              .catch(e => {
                console.log(e);
                window.localStorage.removeItem("distributionId");
                  if (this.parentId) {
                    this.$router.replace(`/distribution/product/${this.parentId}`)
                  } else {
                    this.$router.replace('/distribution/product')
                  }
              });
          }
        })
        .catch(e => {
          console.log(e)
          if (e && e.code === 1511532) {
            this.toast('请发送验证码')
          }
          if (e && e.code === 1511533) {
            this.toast('无效的验证码')
          }
        })
    },
    product() {
      if (this.parentId) {
        this.$router.replace(`/distribution/product/${this.parentId}`)
      } else {
        this.$router.replace('/distribution/product')
      }
    },
    country() {
      this.$router.push('/country')
    },
    login() {
      this.isRegister = false
    },
    decpadleft(val) {
      if (val < 10) return '0' + val
      else return val
    },
    gotoPage(item) {
      console.log('click item: ', this.$root.ISAPP, item)
      if (this.$root.ISAPP) {
        this.javascriptBridge(item.appUrl)
      } else {
        this.$router.push(item.webUrl.name)
      }
    },
    close() {
      this.showTip = false
      this.isRegister = false
    }
  }
}
</script>
<style lang='scss' scoped>
  .register{
    padding: 0 5vw;
    .checkphone{
      padding: 10vw 3vw 0;
      h3{
        margin-bottom: 10vw;
        font-size: 22px;
      }
      h4{
        font-size: 16px;
        margin-bottom: 2vw;
      }
      .phone{
        line-height: 12vw;
        border-bottom: 1px solid #333;
        span{
          color: #333;
          position: relative;
          float: left;
          width: 18vw;
        }
        &.arr span::after{
          content: '';
          width: 0;
          height: 0;
          border-width: 2vw;
          border-style: solid;
          border-color: #333 transparent transparent transparent;
          position: absolute;
          right: 2vw;
          top: 5vw;
        }
        input{
          font-size: 16px;
          width: 60vw;
        }
      }
      .codebox{
        overflow: hidden;
        padding-top: 4vw;
        .code{
          line-height: 12vw;
          border-bottom: 1px solid #333;
          float: left;
          width: 60%;
          input{
            font-size: 16px;
            width: 100%;
          }
        }
        .btn{
          float: right;
          width: 35%;
          border: none;
          background: #333;
          color: #fff;
          line-height: 12vw;
          border-radius: 4px;
          text-align: center;
          &.disabled{
            background: #bbb;
          }
        }
      }
    }
    .btnBox{
      padding-top: 20vw;
      a{
        display: block;
        width: 100%;
        height: 12vw;
        text-align: center;
        line-height: 12vw;
        background: #333;
        color: #fff;
        border-radius: 4px;
        margin-bottom: 3vw;
        &.disabled{
          background: #bbb;
        }
        &.line{
          background: #fff;
          color: #333;
          border: 1px solid #333;
        }
      }
    }
  }
  .mint-popup{
    background: none;
  }
  .popup{
    width: 88vw;
    height: 62vw;
    border-radius: 8px;
    background: url(/static/img/d_popup.png) right bottom #fff;
    background-size: 335px 233px;
    position: relative;
    display: flex;
    .btn{
        height: 10.67vw;
        text-align: center;
        background: #333;
        color: #fff;
        line-height: 10.67vw;
        border-radius: 0 0 8px 8px;
        margin-top: 10vw;
      }
    .notW{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 5.33vw;
      width: 100%;
      padding: 0;
      .title{
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        padding-top: 10vw;
      }
      .text{
        font-size: 14px;
        text-align: center;
      }
      .tips{
        font-size: 12px;
        color: #999;
        line-height: 16vw;
        border-top: 1px dashed #ccc;
      }
    }
    .close{
      width: 7vw;
      height: 7vw;
      position: absolute;
      right: 3vw;
      top: 3vw;
      z-index: 10;
      &::before{
        content: '';
        width: 100%;
        height: 1px;
        background: #333;
        position: absolute;
        transform-origin: 50% 0;
        transform: rotate(45deg);
        position: absolute;
        top: 3vw;
      }
      &::after{
        content: '';
        width: 100%;
        height: 1px;
        background: #333;
        position: absolute;
        transform-origin: 50% 0;
        transform: rotate(-45deg);
        position: absolute;
        top: 3vw;
      }
    }
  }
</style>



